<template>
	<view id="card" v-for="v in card" :key="v.pid">
		<view class="myCard">
			<view class="cardType">
				{{v.cname}}
			</view>
			<view class="store">
				<view class="storeText">
					<text class="text">可用门店：均可使用</text>
					<hr>
					<text class="text">可用范围：{{v.aname}}</text>
					<hr>
					<text class="text">有效期限：{{v.createTime}}-{{v.expireTime}}</text>
				</view>
				<button size="mini" style="background: #c6964f;color: aliceblue;">使用</button>
			</view>
			<view class="useDate">
				<text class="text">该卡卷{{v.usable}}可用，节假日不可用</text>
				<hr>
				<text class="text">该卡券每天仅适用一次</text>
			</view>
		</view>
	</view>

</template>

<script>
	import http from '../../utils/http.js'
	export default {
		data() {
			return {
				card:[]
			}
		},
		methods: {
			getData: function() {
				http({
					url: '/myCoupon/list',
					method: 'post',
					data: {
						id: 9527,
						nowDate: ""
					}
				}).then(({data})=>{
					this.card=data
					console.log(data);
				})
			}
		},
		mounted:function(){
				this.getData()
		}
	}
</script>

<style lang="less">
	#card {
		width: 750rpx;

		.myCard {
			width: 90%;
			height: 350rpx;
			margin: 20rpx auto;
			border-radius: 20rpx;
			border: 1px solid #dadada;

			.cardType {
				padding: 20rpx 0 0 20rpx;
				color: #c6964f;
				font-weight: bold;
			}

			.store {
				padding-left: 20rpx;
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				font-size: 25rpx;
				color: #555555;

				.storeText {
					.text {
						display: inline-block;
						margin-top: 10rpx;
					}
				}

			}

			.useDate {
				padding-left: 20rpx;

				margin-top: 30rpx;

				.text {
					margin-top: 20rpx;
					font-size: 25rpx;
					color: #555555;
				}

			}
		}
	}
</style>
